<template>
	<div class="adm2">
		<div class="tabs">
			<!-- 表格 -->
			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">管理员添加</div>
					</el-header>
					<div class="book-admin">
						<el-form :model="formData" class="demo-form-inline" label-position="left">
							<el-form-item label="账号">
								<el-input v-model.lazy.trim="formData.account" placeholder="请输入账号" />
							</el-form-item>
							<el-form-item label="密码">
								<el-input v-model.lazy.trim="formData.password" type="password" placeholder="请输入密码" />
							</el-form-item>
							<el-form-item label="名字">
								<el-input v-model.lazy.trim="formData.nickname" placeholder="请输入名字" />
							</el-form-item>
							<el-form-item label="电话">
								<el-input v-model.lazy.trim="formData.phone" type="number" placeholder="请输入电话" />
							</el-form-item>

							<el-form-item label="商品图片">
								<div style="margin-top: 15px; display: flex" class="image">
									<!-- 图片显示的区域 -->
									<!-- <el-image :src="`${$Imgurl}/api/public/showImg/${formData.picture}`"></el-image> -->
									<div style="display: flex">
										<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
											:before-upload="beforeUpload" :file-list="fileList" :on-change="handleChange" action="uploadAction"
											list-type="picture" accept=".jpg, .jpeg, .png, .gif">
											<el-button type="primary">上传图片</el-button>
										</el-upload>
									</div>
								</div>
							</el-form-item>

						</el-form>
						<el-button type="success" class="regbtn" @click="reg">注册</el-button>
					</div>
				</el-main>
			</el-container>

		</div>

	</div>
</template>

<script>
import { showLoading } from "../../../utils/loading";
export default {
	name: 'Adm2',
	data () {
		return {
			isLoading: false,
			showLoading: showLoading,
			fileList: [],
			formData: {
				nickname: '',
				account: '',
				password: '',
				phone: '',
			}
		}
	},
	methods: {
		//上传器的方法
		beforeUpload (file) {
			console.log("beforeUplaod");
		},
		handleChange (file, fileList) {
			this.fileList = fileList;
		},

		reg () {
			// 判断是否为空
			if (this.formData.nickname == '' || this.formData.account == '' || this.formData.password == '' || this.formData.phone == '') {
				this.$message({
					message: '请填写完整信息',
					type: 'warning'
				});
				return;
			}

			// 判断图片是否为空
			if (this.fileList.length == 0) {
				this.$message({
					message: '请上传图片',
					type: 'warning'
				});
				return;
			}

			// 判断图片大小
			if (this.fileList[0].size > 1024 * 1024 * 2) {
				this.$message({
					message: '请上传小于2M的图片',
					type: 'warning'
				});
				return;
			}

			// 上传图片
			let formData = new FormData();
			formData.append('file', this.fileList[0].raw);
			formData.append('nickname', this.formData.nickname);
			formData.append('account', this.formData.account);
			formData.append('password', this.formData.password);
			formData.append('phone', this.formData.phone);

			// 发起请求
			this.axios.post("/api/adm/user/addAdm", formData)
				.then((res) => {
					if (res.status === 200) {
						this.$message({
							duration: 1000,
							message: '管理员添加成功',
							type: 'success'
						});
						(this.form.account = ""),
							(this.form.password = ""),
							(this.form.nickname = ""),
							(this.form.phone = "");
					}
				})
				.catch((error) => {
					console.log(error);
				});

		},
	},
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: -20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}

.book-admin {
	margin-top: 20px;
	border: 1px solid gainsboro;
}

.el-form {
	width: 90%;
	margin: 0 auto;
	margin-top: 10px;
}

.regbtn {
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
	width: 300px;
	height: 40px;

}
</style>

